<template>
<div class="role-container">
        <ul class="roles">
            <router-link :to="{path:'/list',query:{type:'qbjs'}}">
            <li >
                <div class="role-content">
                <img src="@/assets/imgs/all.svg" alt="">
                <span>全部角色</span>
                </div>
            </li>
            </router-link>
            <router-link :to="{path:'/list',query:{type:'ios'}}">
            <li>
                <div class="role-content">
                <img src="@/assets/imgs/ios.svg" alt="">
                <span>ios角色</span>
                 </div>
            </li>
            </router-link>
            <router-link :to="{path:'/list',query:{type:'android'}}">
            <li>
                <div class="role-content">
                <img src="@/assets/imgs/android.svg" alt="">
                <span>安卓角色</span>
                </div>
            </li>
            </router-link>
            <router-link :to="{path:'/collection',query:{type:'wdsc'}}">
            <li>
                <div class="role-content">
                <img src="@/assets/imgs/collect.svg" alt="">
                <span>我的收藏</span>
                 </div>
            </li>
            </router-link>
        </ul>
</div>
</template>
<script>

export default {
  name:'HomeRole',
}
</script>
<style lang="scss" scoped>
.role-container{
    margin-top: rem(22);
    padding:0 rem(22);
    .roles {
        display: flex;
        width: 100%;
        height: rem(230);
        margin-top: 10px;
        background-color: #fff;
        border-radius: 10px;
        justify-content: space-around;
        li {            
            float: left;
            margin: rem(10) 0;
            height: rem(180);
            text-align: center;
            .role-content{
                width: rem(180);
                height: rem(180);
  
                img {
                width:rem(130);
                height:rem(130);
                margin: rem(15) rem(15) 0;
                }
                span {
                width: rem(130);
                height: rem(30);
                font-size: rem(35);
                text-align: center;
                }
            }   
        }        
    }
}


</style>